<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			body{
				background-color: #3d5358;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #ff9719;
				border-radius:100px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				box-shadow:0 0 40px 5px orange;
				justify-content: center;
				align-items: center;
				display: flex;
				color: white;
				font-size: 25px;
				font-weight: bold;
				cursor: pointer;
			}
			.box1:hover{
				animation: he 3s infinite linear;
			}
			.box1:hover span{
				animation: fan 1s infinite linear;
			}
			.box1:hover div:nth-child(2){
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: #4B0082;
				border-radius: 10px;
				animation: a1 1s linear infinite;
			}
			.box1:hover div:nth-child(3){
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: green;
				border-radius: 10px;
				animation: a2 1s linear infinite;
			}
			.box1:hover div:nth-child(4){
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: black;
				border-radius: 10px;
				animation: a3 1s linear infinite;
			}
			@keyframes he{
				0%{cursor: pointer;box-shadow:0 0 40px 5px orange;background-color: #ff9719;}
				10%{cursor: copy;box-shadow:0 0 40px 5px green;background-color: #ff9719;}
				20%{cursor: help;box-shadow:0 0 40px 5px red;background-color: green;}
				30%{cursor: move;box-shadow:0 0 40px 5px darkblue;background-color: #ff9719;}
				40%{cursor: progress;box-shadow:0 0 40px 5px brown;background-color: #ff9719;}
				50%{cursor: crosshair;box-shadow:0 0 40px 5px aquamarine;background-color: red;}
				60%{cursor: wait;box-shadow:0 0 40px 5px royalblue;background-color: #ff9719;}
				70%{cursor: cell;box-shadow:0 0 40px 5px indigo;background-color: #ff9719;}
				80%{cursor: zoom-in;box-shadow:0 0 40px 5px fuchsia;background-color: blue;}
				90%{cursor: grab;box-shadow:0 0 40px 5px darkgoldenrod;background-color: #ff9719;}
				100%{cursor: w-resize;box-shadow:0 0 40px 5px indianred;background-color: #ff9719;}
			}
			@keyframes fan{
				0%{transform: scale(0.6);}
				50%{transform: scale(1);}
				100%{transform: scale(0.6);}
			}
			@keyframes a1{
				0%{transform: translateX(0px);}
				25%{transform: translateX(-80px);}
				50%{transform: translateX(0px);}
				75%{transform: translateX(80px);}
				100%{transform: translateX(0px);}
			}
			@keyframes a2{
				0%{transform: translateY(0px);}
				25%{transform: translateY(-80px);}
				50%{transform: translateY(0px);}
				75%{transform: translateY(80px);}
				100%{transform: translateY(0px);}
			}
			@keyframes a3{
				0%{}
				100%{transform: rotateZ(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<span>小手放这</span>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>
